<template>
  <view>
    <view>
      <view class="u-demo-block">
        <u-swiper
          :list="list3"
          keyName="image"
          showTitle
          previousMargin="70"
          height="400"
          nextMargin="70"
          circular
          :autoplay="false"
          radius="15"
          bgColor="#ffffff"
          @click="swiperClick"
        ></u-swiper>
      </view>
    </view>
    <view class="courseLise">
      <text style="font-size: 20px">课程列表</text>
      <view
        class="courseLise_detail"
        @click="courseClick(item)"
        v-for="(item, index) in courseList"
        :key="index"
      >
        <view class="courseLise_detail_left">
          <image
            src="/static/study/study_view.png"
            mode=""
            style="width: 180rpx; height: 180rpx"
          ></image>
        </view>
        <view class="courseLise_detail_right">
          <text style="font-size: 35rpx">{{ item.lessonName }}</text>
          <text class="courseLise_detail_right_title"
            >学习班名称：{{ item.className }}</text
          >
          <text class="courseLise_detail_right_title"
            >学习截止时间：{{ item.endTime }}</text
          >
          <u-line-progress
            :percentage="
              item.videoTime == 0
                ? 0
                : (item.alreadyTime / item.videoTime) * 100
            "
            height="18"
            :showText="false"
            activeColor="#8AC7FD"
            style="width: 67%; display: inline-block"
          >
          </u-line-progress>
          <text style="font-size: 22rpx; margin: 0 0 0 4px"
            >已学习{{
              item.videoTime == 0
                ? 0
                : ((item.alreadyTime / item.videoTime) * 100).toFixed(0)
            }}%</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list3: [
        {
          image: "/static/study/banner1.png",
          title: "",
        },
        {
          image: "/static/study/banner2.png",
          title: "",
        },
        {
          image: "/static/study/banner3.png",
          title: "",
        },
      ],
      courseList: [],
      list: 15,
      page: 0,
    };
  },
  onLoad() {},
  onShow() {},
  mounted() {
    this.search();
  },
  methods: {
    search() {
      this.$api.getCourse({}).then((res) => {
        this.courseList = res.data.data;
        for (let i = 0; i < 3; i++) {
          this.list3[i].title = this.courseList[i]?.lessonName;
        }
      });
    },

    // 课程列表
    courseClick(item) {
      this.$goBack(
        "../onLineStudy/courseDetails?lessonId=" +
          item.lessonId +
          "&classId=" +
          item.classId,
        2
      );
    },

    // 轮播图 点击事件
    swiperClick(index) {
      // console.log(this.courseList[index])
      if (this.courseList[index]) {
        this.$goBack(
          "../onLineStudy/courseDetails?lessonId=" +
            this.courseList[index].lessonId +
            "&classId=" +
            this.courseList[index].classId,
          2
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.courseLise {
  padding: 15px;
  margin: 15px 0 0 0;

  .courseLise_detail {
    margin: 15px 0;
    display: flex;
    justify-content: space-evenly;

    .courseLise_detail_left {
      width: 30%;
      height: 100%;
      display: inline-block;
      padding: 0 0 0 10px;
    }

    .courseLise_detail_right {
      width: 60%;
      height: 100%;
      display: inline-block;

      .courseLise_detail_right_title {
        font-size: 15rpx;
        display: block;
        color: #7e8eaa;
        margin: 5px 0;
      }
    }
  }
}
</style>
